<template>
	<div style="display: flex;align-items: center;margin-bottom: 20px;">
		<span style="margin-right: 10px;cursor: pointer;display: flex;align-items: center;" @click="back">
			<el-icon><ArrowLeft /></el-icon>
			<span>返回</span>
			<span style="margin-left: 10px;">|</span>
		</span>
		<h3>会员详情</h3>
	</div>
	
	<div class="head">
		<div class="one">
			<div class="imgtext">
				<span class="myspan">会员头像</span>
				<img src="../../public/头像.png" class="avatar">
			</div>
			<div class="text">
				<p>UID</p>
				<p>{{data.userAccount}}</p>
			</div>
		</div>
		<div class="two">
			<p>积分</p>
			<h3>{{data.userScore}}</h3>
			<p>累计 {{data.userTotalScore}}</p>
		</div>
		<div class="two">
			<p>余额</p>
			<h3>{{data.userCanuseMoney}}</h3>
			<p>累计 {{data.userTotalMoney}}</p>
		</div>
		<div class="two">
			<p>可提现余额</p>
			<h3>{{data.userCanBe}}</h3>
			<p>累计 {{data.totalUserTotalMoney}}</p>
		</div>
		<div class="two">
			<p>佣金</p>
			<h3>{{data.userDistributionMoney}}</h3>
			<p>累计 {{data.userTotalDistribution}}</p>
		</div>
	</div>
	
	<div class="myform">
		<div>
			<span class="characters">用户名：</span>
			<span class="record">{{data.userName}}</span>
		</div>
		<div>
			<span class="characters">手机号：</span>
			<span class="record">{{data.userTel}}</span>
		</div>
		<div>
			<span class="characters">会员标签：</span>
			<span class="record">{{data.userTagId}}</span>
		</div>
		<div>
			<span class="characters">出生日期：</span>
			<span class="record">{{data.userBirthday}}</span>
		</div>
		<div>
			<span class="characters">性别：</span>
			<span class="record">{{data.userSex}}</span>
		</div>
		<div>
			<span class="characters">微信公众号openid：</span>
			<span class="record">{{data.wxOpenid}}</span>
		</div>
		<div>
			<span class="characters">注册来源：</span>
			<span class="record">{{data.orderSourceId}}</span>
		</div>
		<div>
			<span class="characters">创建时间：</span>
			<span class="record">{{data.createTime}}</span>
		</div>
		<div>
			<span class="characters">最后登录时间：</span>
			<span class="record">{{data.userLastTime}}</span>
		</div>
	</div>
</template>

<script setup>
	import {GetVipDetails} from "@/api"
	import { ref,reactive,onMounted} from 'vue'
	import { defineEmits } from 'vue';
	import {ArrowLeft} from '@element-plus/icons-vue'
	const message=ref(false)
	const emit = defineEmits(['update-message']);
	
	let data = ref([])
	
	//获取会员详情列表
	const getdatial = async ()=>{
		let res = await GetVipDetails({
			userId:Number(sessionStorage.getItem("userId")),
		})
		// console.log("会员详情",res)
		data.value = res
		data.value.userScore=Math.floor(data.value.userScore)
		if(data.value.wxOpenid==null){
			data.value.wxOpenid="暂无数据"
		}
		// data.value.userScore
		// console.log(data.value.userScore)
	}
	//返回
	const back=()=>{
		// console.log(message);
		emit('update-message',message);
		// console.log(11111);
	}
	onMounted(()=>{
			getdatial()
	})
</script>

<style scoped lang="less">
	.head{
		// margin-top: 20px;
		width: 100%;
		height: 120px;
		background: #fafafc;
		display: flex;
		justify-content: space-evenly;
		.one{
			width: 18%;
			.avatar{
				width: 50px;
			}
			.imgtext{
				display: flex;
				align-items: center;
				justify-content: space-around;
				margin-top: 10px;
			}
			.text{
				margin-top: 15px;
				display: flex;
				justify-content: space-evenly;
			}
		}
		.two{
			width: 18%;
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
			h3{
				font-weight: 400;
			}
		}
	}
	.myform{
		margin-top: 20px;
		div{
			margin: 10px 0;
		}
		.characters{
			display: inline-block;
			text-align: right;
			height: 30px;
			line-height: 30px;
			width: 160px;
		}
		.record{
			display: inline-block;
			padding-left: 10px;
			height: 30px;
			line-height: 30px;
		}
	}
	
</style>
